<template>
  <div class="apply">
    <div class="top_wrap">
      <div class="login_top">
        <div class="left_logo" />
      </div>
    </div>
    <div class="content_wrap">
      <p class="text-center title">欢迎入驻商家</p>
      <div class="flex align-center justify-center flow_wrap">
        <div class="flex flex-column align-center flow_item">
          <span
            class="inline-block text-center flow_step"
            :class="activeStep>=1?'active':''"
          >1</span>
          <span>填写店铺信息</span>
        </div>
        <div
          class="flex flex-column align-center flow_item"
          style="padding:0 140px"
        >
          <span
            class="inline-block text-center flow_step"
            :class="activeStep>=2?'active':''"
          >2</span>
          <span>填写公司信息</span>
        </div>
        <div class="flex flex-column align-center flow_item">
          <span
            class="inline-block text-center flow_step"
            :class="activeStep==3?'active':''"
          >3</span>
          <span>提交完成</span>
        </div>
      </div>
      <div class="form_wrap">
        <div class="main">
          <h3 class="step_title">{{ activeStep==1?'填写店铺信息':activeStep==2?'填写公司信息':'提交完成' }}</h3>
          <div
            v-if="activeStep==3"
            class="text-center"
            style="padding:40px 0"
          >
            <div class="flex justify-center">
              <span class="blue-font"><i
                class="el-icon-success"
                style="font-size:60px"
              /></span>
              <div style="padding-left:28px">
                <h1 class="blue-font">商家认证提交成功</h1>
                <p
                  class="color-999 text-left"
                  style="margin-top:18px"
                >{{ currentDate }}</p>
              </div>
            </div>
            <p style="margin-top:24px">商家认证将在1-3个工作日完成审核，节假日除外。</p>
          </div>
          <template v-else>
            <el-form
              ref="shopForm"
              :model="shopForm"
              label-position="top"
              :rules="rules"
            >
              <template v-if="activeStep==1">
                <el-form-item
                  label="店铺名称"
                  prop="shopname"
                >
                  <el-input
                    v-model="shopForm.shopname"
                    placeholder="请输入店铺名称"
                  />
                </el-form-item>
                <p class="color-999 form_item_tip">限制1~50个字符，中文字体为两个字符</p>
                <el-form-item
                  label="店铺头像"
                  prop="photo"
                >
                  <crop-upload
                    show-type="photo"
                    :init-val="shopForm.photo"
                    :photo-width="130"
                    :photo-height="130"
                    wrapper-width="130px"
                    wrapper-height="130px"
                    @setVal="(val)=>setUrl('photo',val)"
                  />
                </el-form-item>
                <p class="color-999 form_item_tip">小程序商铺展示使用，可上传公司logo图片。支持图片格式jpg、png、bmp，图片大小限制2M。</p>
                <el-form-item
                  label="经营项目"
                  prop="shoptype"
                >
                  <el-select
                    v-model="shopForm.shoptype"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in typeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="店铺联系人"
                  prop="people"
                >
                  <el-input
                    v-model="shopForm.people"
                    placeholder="请输入联系人姓名"
                  />
                </el-form-item>
                <el-form-item
                  label="店铺邮箱"
                  prop="people"
                >
                  <el-input
                    v-model="shopForm.email"
                    placeholder="请输入联系人邮箱"
                  />
                </el-form-item>
                <el-form-item
                  label="联系人手机号"
                  prop="contact_tel"
                >
                  <el-input
                    v-model="shopForm.contact_tel"
                    placeholder="请输入联系人手机号"
                  />
                </el-form-item>
                <p class="color-999 form_item_tip">该手机号默认后台管理登陆账号</p>
                <el-form-item
                  label="公司发票类型（可多选）"
                  prop="faptype"
                >
                  <div
                    class="fp_item"
                    :class="{'active':shopForm.faptype.indexOf(1)>-1}"
                    @click="fpTypeChange(1)"
                  >普通发票</div>
                  <div
                    class="fp_item"
                    :class="{'active':shopForm.faptype.indexOf(2)>-1}"
                    @click="fpTypeChange(2)"
                  >增值税发票</div>
                </el-form-item>
              </template>
              <template v-if="activeStep==2">
                <el-form-item
                  label="公司/机构名称"
                  prop="mechanism"
                >
                  <el-input
                    v-model="shopForm.mechanism"
                    placeholder="请输入营业执照公司全称"
                  />
                </el-form-item>
                <el-form-item
                  label="工商注册号"
                  prop="companyid"
                >
                  <el-input
                    v-model="shopForm.companyid"
                    placeholder="请输入工商注册号"
                  />
                </el-form-item>
                <el-form-item
                  label="公司所在地区"
                  prop="company_area"
                >
                  <el-cascader
                    v-model="shopForm.company_area"
                    clearable
                    filterable
                    placeholder="请选择公司所在地区"
                    :options="areaList"
                    :props="areaProps"
                    separator="-"
                  />
                </el-form-item>
                <el-form-item
                  label="公司详细地址"
                  prop="company"
                >
                  <el-input
                    v-model="shopForm.company"
                    placeholder="请输入公司详细地址"
                  />
                </el-form-item>
                <el-form-item
                  label="当前经营位置"
                  prop="shopcity"
                >
                  <el-cascader
                    v-model="shopForm.shopcity"
                    clearable
                    filterable
                    placeholder="请选择当前经营位置"
                    :options="regionList"
                    :props="optionProps"
                    separator="-"
                  />
                </el-form-item>
                <div class="flex align-center">
                  <el-form-item
                    class="flex-1"
                    label="营业执照图片"
                    prop="shopcard"
                  >
                    <crop-upload
                      show-type="photo"
                      :init-val="shopForm.shopcard"
                      :photo-width="200"
                      :photo-height="150"
                      wrapper-width="200px"
                      wrapper-height="150px"
                      @setVal="(val)=>setUrl('shopcard',val)"
                    />
                  </el-form-item>
                  <el-form-item
                    class="flex-1"
                    label="公司门头照"
                    prop="doorphoto"
                  >
                    <crop-upload
                      show-type="photo"
                      :init-val="shopForm.doorphoto"
                      :photo-width="200"
                      :photo-height="150"
                      wrapper-width="200px"
                      wrapper-height="150px"
                      @setVal="(val)=>setUrl('doorphoto',val)"
                    />
                  </el-form-item>
                  <el-form-item
                    class="flex-1"
                    label="公章图片"
                    prop="seal_url"
                  >
                    <crop-upload
                      show-type="photo"
                      :init-val="shopForm.seal_url"
                      :photo-width="200"
                      :photo-height="150"
                      wrapper-width="200px"
                      wrapper-height="150px"
                      @setVal="(val)=>setUrl('seal_url',val)"
                    />
                  </el-form-item>
                </div>
                <div class="flex align-center">
                  <el-form-item
                    class="flex-1"
                    label="法人姓名"
                    prop="faname"
                  >
                    <el-input
                      v-model="shopForm.faname"
                      placeholder="请输入公司法人姓名"
                    />
                  </el-form-item>
                  <el-form-item
                    class="flex-1"
                    style="margin-left:50px"
                    label="法人身份证号"
                    prop="idcard"
                  >
                    <el-input
                      v-model="shopForm.idcard"
                      placeholder="请输入公司法人身份证号"
                    />
                  </el-form-item>
                </div>
                <el-form-item>
                  <p slot="label"><span
                    class="required-icon"
                    style="margin-right:5px"
                  >*</span>法人身份证图片</p>
                  <div class="flex flex-center idcard_wrap">
                    <el-form-item prop="faidcard">
                      <crop-upload
                        show-type="photo"
                        :init-val="shopForm.faidcard"
                        :photo-width="248"
                        :photo-height="148"
                        wrapper-width="248px"
                        wrapper-height="148px"
                        @setVal="(val)=>setUrl('faidcard',val)"
                      />
                    </el-form-item>
                    <el-form-item
                      style="margin-left:32px"
                      prop="faidcard_back"
                    >
                      <crop-upload
                        show-type="photo"
                        :init-val="shopForm.faidcard_back"
                        :photo-width="248"
                        :photo-height="148"
                        wrapper-width="248px"
                        wrapper-height="148px"
                        @setVal="(val)=>setUrl('faidcard_back',val)"
                      />
                    </el-form-item>
                  </div>
                </el-form-item>
              </template>
            </el-form>
            <p
              class="text-center"
              style="margin-top:30px"
            >
              <el-checkbox v-model="agreeChecked">我已阅读同意<span class="blue-font">《商家认证协议》</span></el-checkbox>
            </p>
          </template>
        </div>
        <div class="bottom">
          <el-button
            v-if="activeStep==2"
            type="primary"
            @click="activeStep=1"
          >上一页</el-button>
          <el-button
            v-if="activeStep==1"
            type="primary"
            @click="activeStep=2"
          >下一页</el-button>
          <el-button
            v-if="activeStep==2"
            type="primary"
            @click="submit"
          >提交审核</el-button>
          <el-button
            v-if="activeStep==3"
            type="primary"
            @click="$router.push('/login')"
          >完成</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getParentCategory, getRegion, addSupplier } from '@/api/index'
import { checkName, checkMobile, checkCompanyId, checkCardId } from '@/utils/validate'
import cropUpload from '@/components/cropUpload'
import { formatDate } from '@/utils/index'
export default {
  components: { cropUpload },
  data() {
    const validateName = (rule, value, callback) => {
      if (!checkName(value)) {
        callback(new Error('姓名格式错误'))
      } else {
        callback()
      }
    }
    const validateMobile = (rule, value, callback) => {
      if (!checkMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    const validateCompanyId = (rule, value, callback) => {
      if (!checkCompanyId(value)) {
        callback(new Error('工商注册号格式错误'))
      } else {
        callback()
      }
    }
    const validateIdCard = (rule, value, callback) => {
      if (!checkCardId(value)) {
        callback(new Error('身份证号格式错误'))
      } else {
        callback()
      }
    }
    return {
      activeStep: 1,
      shopForm: {
        shopname: '',
        photo: '',
        shoptype: '',
        people: '',
        contact_tel: '',
        faptype: [1],
        mechanism: '',
        companyid: '',
        company_area: '',
        company: '',
        shopcity: '',
        shopcard: '',
        doorphoto: '',
        seal_url: '',
        faname: '',
        idcard: '',
        faidcard: '',
        faidcard_back: '',
        email: ''
      },
      rules: {
        shopname: [
          { required: true, message: '店铺名称不能为空', trigger: 'blur' }
        ],
        photo: [
          { required: true, message: '店铺头像不能为空', trigger: 'change' }
        ],
        shoptype: [
          { required: true, message: '请选择经营项目', trigger: 'change' }
        ],
        people: [
          { required: true, message: '店铺联系人不能为空', trigger: 'blur' },
          { validator: validateName, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'change' }
        ],
        contact_tel: [
          { required: true, message: '联系人手机号不能为空', trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ],
        faptype: [
          { required: true, message: '请选择公司发票类型', trigger: 'change' }
        ],
        mechanism: [
          { required: true, message: '公司/机构名称不能为空', trigger: 'blur' }
        ],
        companyid: [
          { required: true, message: '工商注册号不能为空', trigger: 'blur' },
          { validator: validateCompanyId, trigger: 'blur' }
        ],
        company_area: [
          { required: true, message: '请选择公司所在地区', trigger: 'change' }
        ],
        company: [
          { required: true, message: '公司详细地址不能为空', trigger: 'blur' }
        ],
        shopcity: [
          { required: true, message: '请选择当前经营位置', trigger: 'change' }
        ],
        shopcard: [
          { required: true, message: '请上传营业执照图片', trigger: 'change' }
        ],
        doorphoto: [
          { required: true, message: '请上传公司门头照', trigger: 'change' }
        ],
        seal_url: [
          { required: true, message: '请上传公章图片', trigger: 'change' }
        ],
        faname: [
          { required: true, message: '公司法人姓名不能为空', trigger: 'blur' },
          { validator: validateName, trigger: 'blur' }
        ],
        idcard: [
          { required: true, message: '公司法人身份证号不能为空', trigger: 'blur' },
          { validator: validateIdCard, trigger: 'blur' }
        ],
        faidcard: [
          { required: true, message: '请上传身份证正面', trigger: 'change' }
        ],
        faidcard_back: [
          { required: true, message: '请上传身份证背面', trigger: 'change' }
        ]
      },
      typeList: [],
      agreeChecked: false,
      optionProps: {
        value: 'name',
        label: 'name',
        expandTrigger: 'hover',
        children: 'sub'
      },
      areaProps: {
        value: 'id',
        label: 'name',
        expandTrigger: 'hover',
        children: 'sub'
      },
      regionList: [],
      areaList: [],
      currentDate: '',
      relationId: ''
    }
  },
  mounted() {
    if (this.$route.query && this.$route.query.relationId) {
      this.relationId = this.$route.query.relationId
    }
    this.getSelect()
  },
  methods: {
    getAreaStr(arr) {
      let str = ''
      for (const p of this.areaList) {
        if (p.id == arr[0]) {
          str += p.name
          if (p.sub) {
            for (const c of p.sub) {
              if (c.id == arr[1]) {
                str += '-' + c.name
              }
              if (c.sub) {
                for (const ct of c.sub) {
                  if (ct.id == arr[2]) {
                    str += '-' + ct.name
                  }
                }
              }
            }
          }
        }
      }
      return str
    },
    submit() {
      if (!this.agreeChecked) {
        this.$message({
          message: '请勾选同意协议！',
          type: 'warning'
        })
        return
      }
      this.$refs['shopForm'].validate((valid) => {
        if (valid) {
          const params = { ...this.shopForm }
          params.company_area = this.getAreaStr(this.shopForm.company_area)
          params.area_id = this.shopForm.company_area[1]
          params.shopcity = params.shopcity.join('-')
          params.faptype = params.faptype.join(',')
          params.relationId = this.relationId || ''
          addSupplier(params).then(res => {
            this.currentDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
            this.activeStep = 3
          })
        } else {
          this.$message({
            message: '请检查表单错误',
            type: 'error'
          })
          return false
        }
      })
    },
    fpTypeChange(val) {
      const index = this.shopForm.faptype.findIndex(item => val == item)
      if (index > -1) {
        this.shopForm.faptype.splice(index, 1)
      } else {
        this.shopForm.faptype.push(val)
      }
    },
    setUrl(key, value) {
      this.shopForm[key] = value
    },
    getSelect() {
      getParentCategory().then(res => {
        this.typeList = res || []
      })
      getRegion().then(res => {
        this.regionList = res ? res[0].sub : []
        this.areaList = res ? [...res[0].sub] : []
        const index = this.areaList.findIndex(k => k.id == 7459)
        this.areaList.splice(index, 1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.apply {
  min-height: 100vh;
  background-color: #f5f5f5;
  .top_wrap {
    background-color: #ffffff;
  }
  .login_top {
    height: 75px;
    width: 1200px;
    margin: 0 auto;
    position: relative;
    .left_logo {
      float: left;
      height: 48px;
      width: 172px;
      margin-top: 15px;
      background: url(../../assets/images/login_logo.png) no-repeat;
      background-size: 100%;
    }
    .right_link1 {
      cursor: pointer;
      font-size: 16px;
      line-height: 75px;
      float: right;
      margin-left: 45px;
      :hover {
        color: #53a6ff;
      }
    }
    .right_link2 {
      cursor: pointer;
      font-size: 16px;
      float: right;
      line-height: 75px;
      :hover {
        color: #53a6ff;
      }
    }
  }
  .content_wrap {
    padding: 50px 0;
    background-image: url("../../assets/images/home_bg.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    .title {
      font-size: 26px;
      line-height: 20px;
    }
    .flow_item {
      position: relative;
      min-width: 100px;
    }
    .flow_item:nth-of-type(2):before {
      content: "";
      display: inline-block;
      width: 120px;
      height: 4px;
      background: #999999;
      position: absolute;
      top: 20px;
      left: 0;
    }
    .flow_item:nth-of-type(2):after {
      content: "";
      display: inline-block;
      width: 120px;
      height: 4px;
      background: #999999;
      position: absolute;
      top: 20px;
      right: 0;
    }

    .flow_step {
      width: 40px;
      height: 40px;
      line-height: 38px;
      background: #999999;
      border-radius: 50%;
      color: #ffffff;
      font-size: 20px;
      margin-bottom: 10px;
      &.active {
        background: #2993ff;
      }
    }

    .flow_wrap {
      margin: 30px 0 50px;
    }
  }
  .form_wrap {
    width: 1000px;
    margin: auto;
    background: #ffffff;
    box-shadow: 0px 15px 20px 0px rgba(38, 38, 38, 0.15);
    .main {
      padding: 50px 100px 30px;
    }
    .bottom {
      height: 80px;
      line-height: 80px;
      text-align: center;
      background: #ffffff;
      box-shadow: 0px -1px 0px 0px #eeeeee;
      .el-button {
        width: 160px;
        height: 40px;
        padding: 0;
        line-height: 32px;
        background: #2993ff;
        border-radius: 4px;
        font-size: 20px;
      }
    }
  }
  .step_title {
    padding-left: 25px;
    padding-bottom: 8px;
    border-bottom: 1px solid #cdcdcd;
    border-left: 4px solid #2993ff;
    margin-bottom: 20px;
  }
  .fp_item {
    display: inline-block;
    width: 380px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: #f5f5f5;
    border: 1px solid #eeeeee;
    border-radius: 3px;
    color: #999999;
    font-size: 16px;
    & + .fp_item {
      margin-left: 40px;
    }
    &.active {
      background: #f3f6fb;
      border: 1px solid #40adfb;
      color: #40adfb;
    }
  }
  .el-cascader {
    width: 100%;
  }
  /deep/.el-form .el-input,
  /deep/.el-form .el-select {
    width: 100%;
  }
  .idcard_wrap {
    height: 200px;
    background: #f9f9f9;
    .el-form-item:first-of-type /deep/.photo_wrapper {
      background-image: url(../../assets/images/idcard.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      border: 1px dashed #333333;
    }
    .el-form-item:last-of-type /deep/.photo_wrapper {
      background-image: url(../../assets/images/fidcard.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      border: 1px dashed #333333;
    }
  }
}
</style>
